<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" label-width="90px" inline size="small">
                    <el-form-item label-width="70px" label="开始日期">
                        <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" />
                    </el-form-item>
                    <el-form-item label-width="120px" label="结束日期">
                        <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" />
                    </el-form-item>
                    <el-form-item label-width="120px" label="供应商">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" label-width="120px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="70px" label="使用人">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="车牌号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" label-width="120px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" icon="el-icon-search">查询</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
                        <el-button type="info" plain>清空条件</el-button>
                        <el-button type="info" size="small" plain>批量审核</el-button>
                            <el-button type="info" size="small" plain>批量取消审核</el-button>
                            <el-button type="info" size="small" plain>导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 640px;" class="mt-1">
                <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" stripe border
                    max-height="580px">
                    <el-table-column prop="line" label="序号" width="80" sortable align="center" />
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column prop="id" label="ID" align="center" />
                    <el-table-column prop="carno" label="车牌号" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_car.html')">{{
                                    scope.row.carno }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="使用人" align="center" />
                    <el-table-column prop="" label="类型" align="center" />
                    <el-table-column prop="edittime" label="日期" align="center" />
                    <el-table-column prop="money" label="金额" align="center" />
                    <el-table-column prop="editer" label="录入人" align="center" />
                    <el-table-column prop="" label="维修原因" align="center" />
                    <el-table-column prop="ep" label="备注" width="280" align="center" />
                    <el-table-column label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini"
                                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row)" class="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>


        <!-- 分页 -->
        <footer>
            <div class="right">
                <p>累计金额：<span style="color:#409eff">￥{{ 999 }}元 </span></p>
            </div>
            <div class="pagin">
                <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </footer>

        <el-dialog title="新增维修或充值" :visible.sync="dialogVisible" width="55%">
            <el-form :model="form" inline size="small">
                <el-form-item label-width="55px" label="ID">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="165px" label="车牌号">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="160px" label="使用人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="类型" label-width="55px">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="165px" label="维修项目">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="160px" label="供应商">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label-width="55px" label="工时">
                    <el-input v-model="form.name">
                        <template slot="append">元</template></el-input>
                </el-form-item>
                <el-form-item label-width="112px" label="维修原因">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="160px" label="规格(油品)">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label-width="55px" label="公里数">
                    <el-input v-model="form.name">
                        <template slot="append">公里</template></el-input>
                </el-form-item>
                <el-form-item label-width="100px" label="借款日期">
                    <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" />
                </el-form-item>
                <el-form-item label-width="160px" label="操作日期">
                    <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" />
                </el-form-item>
                <el-form-item label-width="55px" label="数量">
                    <el-input v-model="form.name">
                        <template slot="append">个(升)</template></el-input>
                </el-form-item>
                <el-form-item label-width="90px" label="配件价格">
                    <el-input v-model="form.name">
                        <template slot="append">元</template></el-input>
                </el-form-item>

                <el-form-item label-width="105px" label="总金额">
                    <el-input v-model="form.name">
                        <template slot="append">元</template></el-input>
                </el-form-item>
                <el-form-item label-width="55px" label="修改人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="165px" label="审核人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label-width="160px" label="备注">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="是否审核">
                    <el-checkbox-group v-model="form.region">
                        <el-checkbox size="medium"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">审 核</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { invsetAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-11-24 08:46:55  星期五
* @description   维修及充值
**/

import { oldLoginSystem } from '@/utils/publicMethod'
export default {
    name: 'index',
    data() {
        return {
            form: {
                name: '',
                region: ''
            },
            tableData: [],
            // 初始化参数
            initParams: {
                action: 'carMtList',
                carno: '',
                ep: '',
                sdate: '',
                edate: '',
                page: 1,
                pageSize: 20,
                sortStr: '',
                name: '',
                type: '',
                sup: '',
                sure: '',
            },
            total: 0,
            dialogVisible: false
        }
    },
    mounted() {
        this.getInvsetList()
    },
    methods: {
        //  跳旧版详情
        go(val, URL) {
            const redirectUrl = `${URL}?car=${val.carno}&aid=${this.$store.getters.userInfo.jxid}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },
        async getInvsetList() {
            let { data, code, total } = await invsetAPI(this.initParams)
            if (!code) {
                data.forEach(item => item.edittime = item.edittime.substring(0, 10));
                this.tableData = data
                this.total = total
            }
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getInvsetList()
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getInvsetList()
        },
        add() {
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
.btn {
    width: 90%;
    display: flex;
    justify-content: space-between;
}

footer {
    display: flex;
    align-items: center;

    .right {
        width: 100%;
        p {
            margin: 0;
            &::before {
                display: inline-block;
                content: '';
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: #409eff;
                margin-right: 5px;
            }
        }
    }
}

.dialog-footer {
    text-align: center;
}
</style>